<template>
  <div v-loading="isLoading"
       class="container">
    <el-card>
      <template #header>
        <el-form ref="searchForm"
                 inline>
          <el-form-item label="井盖报警器"
                        prop="news_type">
            <el-select v-model="builingForm.equipmentId"
                       placeholder="请选择井盖报警器">
              <el-option v-for="(oVal, oIdx) of type"
                         :key="oIdx"
                         v-bind="oVal" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="getList()">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table_tool">
          <el-button type="primary"
                     @click="showAddOrEdit = true">导出数据</el-button>
        </div>
      </template>

      <el-table :data="tableData"
                border>
        <!-- <el-table-column prop="id" label="id" /> -->
        <el-table-column prop="create_time"
                         label="设备编号" />
        <el-table-column prop="title"
                         label="井盖位置" />
        <el-table-column prop="sign_up_count"
                         label="预警时间" />
        <el-table-column prop="comment_count"
                         label="详细情况" />
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination background
                     layout="total, sizes, pager, jumper"
                     :current-page="searchForm.page"
                     :page-sizes="[10, 20, 30, 50, 100]"
                     :page-size="searchForm.per_page"
                     :total="tableTotal"
                     @size-change="changeSize"
                     @current-change="changeCurrent" />
    </footer>

  </div>
</template>

<script>
import API from '@/api'
import { table, addOrEdit } from '@/utils/mixins'

export default {

  components: {
  },
  mixins: [table, addOrEdit],

  data: () => ({
    isLoading: true,
    tableData: [],
    tableTotal: 0,
    type: [],
    isKey: false,
    builingForm: {
      equipmentId: ''
    }
  }),

  created () {
    this.isLoading = true
    this.type = [
      { label: '和雅苑2幢井盖报警器', value: '862149058386345' },
      { label: '和雅苑3幢井盖报警器', value: '862149058437080' },
      { label: '和雅苑5幢井盖报警器', value: '862149058397201' },
      { label: '和雅苑7幢井盖报警器', value: '862149058436850' },
      { label: '和风苑入口右转井盖报警器', value: '865901055009180' },
      { label: '和风苑路面井盖报警器', value: '865901055003845' },
      { label: '和风苑2幢井盖报警器', value: '862149058366198' },
      { label: '和风苑3幢井盖报警器', value: '862149058332828' },
      { label: '和风苑4幢井盖报警器', value: '862149058340821' },
      { label: '和风苑5幢井盖报警器', value: '862149058372782' },
      { label: '和风苑6幢井盖报警器', value: '869907059629242' },
      { label: '和风苑7幢井盖报警器', value: '869907059434155' },
      { label: '和风苑8幢井盖报警器', value: '862149058499924' },
      { label: '洋安家园路面井盖报警器', value: '865901055003142' },
      { label: '洋安家园9幢井盖报警器', value: '869907059437885' },
      { label: '洋安家园10幢井盖报警器', value: '869907059628038' },
      { label: '洋安家园28幢井盖报警器', value: '862149058422355' },
      { label: '洋安家园29幢井盖报警器', value: '869907059436861' },
      { label: '洋安家园30幢井盖报警器', value: '862149058366321' },
      { label: '洋安家园31幢井盖报警器', value: '862149058512601' },
      { label: '洋安家园32幢井盖报警器', value: '862149058382021' },
      { label: '洋安家园33幢井盖报警器', value: '869907059628475' },
      { label: '洋安家园34幢井盖报警器', value: '869907059629218' },
      { label: '洋安家园35幢井盖报警器', value: '862149058390636' },
      { label: '洋安家园36幢井盖报警器', value: '862149058425580' },
      { label: '洋安家园37幢井盖报警器', value: '862149058321508' }
    ]
    this.isLoading = false
  },

  methods: {
    // 获取列表
    getList () {
      const id = this.builingForm.equipmentId
      API.EquipmentDetail(id)
        .then(({ data }) => {
          console.log(data)
          return
          const consultList = data.items.map(item => {
            return {
              id: item.id,
              title: item.title,
              qr_img: item.qr_img,
              finished: dayjs().subtract(1, 'hour').isAfter(item.end_time),
              sign_up_count: item.activity_sign_up.length,
              comment_count: item.activity_comments.length,
              create_time: item.create_time
            }
          })
          this.tableData = consultList
          this.tableTotal = data.total
        }).catch((err) => {
          this.tableData = []
          this.tableTotal = 0
        }).finally(() => {
          this.isLoading = false
        })
    },

    // 分页
    changeSize (val) {
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent (val) {
      this.searchForm.page = val
      this.getList()
    },

    // 创建活动
    addCommunity () {
      if (!this.builingForm.title.trim()) return this.$message.error('标题不可为空~~')
      if (!this.builingForm.organizer.trim()) return this.$message.error('主办方不可为空~~')
      if (!this.builingForm.organizer_addr.trim()) return this.$message.error('举办地不可为空~~')
      if (!this.builingForm.sign_up_start_time.trim()) return this.$message.error('报名开始时间不可为空~~')
      if (!this.builingForm.sign_up_end_time.trim()) return this.$message.error('报名结束时间不可为空~~')
      if (!this.builingForm.start_time.trim()) return this.$message.error('活动开始时间不可为空~~')
      if (!this.builingForm.end_time.trim()) return this.$message.error('活动结束不可为空~~')
      if (!this.builingForm.banner.trim()) return this.$message.error('活动图片不可为空~~')
      if (!this.builingForm.content.trim()) return this.$message.error('活动详情不可为空~~')

      const data = {
        title: this.builingForm.title,
        organizer: this.builingForm.organizer,
        organizer_addr: this.builingForm.organizer_addr,
        sign_up_max: this.builingForm.sign_up_max,
        is_top: this.builingForm.is_top,
        is_comment: this.builingForm.is_comment,
        comment_check: this.builingForm.comment_check,
        is_sign_up: this.builingForm.is_sign_up,
        sign_up_start_time: this.builingForm.sign_up_start_time,
        sign_up_end_time: this.builingForm.sign_up_end_time,
        is_sign_in: this.builingForm.is_sign_in,
        sign_up_score: this.builingForm.sign_up_score,
        start_time: this.builingForm.start_time,
        end_time: this.builingForm.end_time,
        banner: this.builingForm.banner,
        sign_in_score: this.builingForm.sign_in_score,
        sign_out_score: this.builingForm.sign_out_score,
        activity_type_id: this.builingForm.activity_type_id,
        content: this.builingForm.content
      }

      if (this.builingForm.$id) {
        const id = this.builingForm.$id
        API.editCommunityAct(id, data)
          .then(({ data }) => {
            this.$message.success('编辑成功！')
          }).catch((err) => {
          }).finally(() => {
            this.resetForm()
            this.getList()
          })
      } else {
        API.addCommunityAct(data)
          .then(({ data }) => {
            this.$message.success('编辑成功！')
          }).catch((err) => {
          }).finally(() => {
            this.resetForm()
            this.getList()
          })
      }
    },

    resetForm () {
      this.builingForm.title = ''
      this.builingForm.organizer = ''
      this.builingForm.organizer_addr = ''

      this.builingForm.content = ''
      this.showAddOrEdit = false
    }

  }
}
</script>

  <style lang="scss" scoped>
::v-deep {
  .el-message-box {
    min-width: 400px;
  }
  .el-dialog {
    margin-top: 2vh !important;
  }
  .el-input .el-input__inner {
    border-radius: 4px !important;
  }
  .el-switch {
    transform: translateY(6px);
  }
  .el-message-box__message {
    position: absolute !important;
    top: 50% !important;
    left: 40px !important;
  }
  .el-form-item__label {
    font-size: 16px !important;
  }
}
</style>

